<template>


    <div class="wallet-recent-intro">
        <h3>What is an POD wallet?</h3>
        <p>POD wallet is an secure and efficient payment tool developed by the PODpartner.</p>
        <h3>What are the benefits of using a POD wallet?</h3>
        <ul>
            <li>
                <img src="@/assets/images/billing/wallet-intro-01.png">
                <strong>It can improve the efficiency of order delivery.</strong>
                <span>With <a @click="scrollToPayment()">automatic payments</a> enabled for your wallet, your PODpartner
                    orders will be
                    automatically fulfilled using your balance, initiating production immediately. This saves you time
                    and ensures faster delivery for your customers.</span>
            </li>
            <li>
                <img src="@/assets/images/billing/wallet-intro-02.png">
                <strong>It makes your transactions safer.</strong>
                <span>You can keep track of your top-up history and payment records anytime with POD wallet and get a
                    clearer idea of all your transactions.</span>
            </li>

            <li>
                <img src="@/assets/images/billing/wallet-intro-03.png">
                <strong>It saves you transaction fees.</strong>
                <span>When you make a payment through a bank account, the bank may charge a transaction fee and possibly
                    other costs. However, if you're paying with POD wallet, all you need to pay is the order
                    total.</span>
            </li>

            <li>
                <img src="@/assets/images/billing/wallet-intro-04.png">
                <strong>It's more profitable to add funds to POD wallet using your bank card.</strong>
                <span>When you add funds to POD wallet directly from your bank account, you'll enjoy lower fees, since
                    bank transfers incur lower transaction fees than other payment methods. And we're pleased to pass on
                    these savings to you in the form of a 2% cashback, boosting your profit.</span>
            </li>

            <li>
                <img src="@/assets/images/billing/wallet-intro-05.png">
                <strong>It prevents your credit card from being frozen.</strong>
                <span>Frequent small payments in a short period may be regarded as fraudulent activities by some banks,
                    causing your credit card to be frozen. POD wallet keeps all your payments within our system and
                    saves you the trouble of dealing with banking issues.</span>
            </li>

        </ul>
    </div>
</template>
<script>
export default {
    data () {
        return {
        };
    },
    computed: {

    },
    methods: {

        scrollToPayment () {
            this.$emit('global:wallet-payment')
        }

    },
};
</script>
<style lang="scss" scoped>
.wallet-recent-intro {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;

    h3 {
        margin-top: 32px;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 24px;
    }

    p {
        margin-top: 8px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 22px;
        position: relative;
    }

    li {
        position: relative;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        padding-left: 44px;

        svg,
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 24px;
            height: 24px;
        }

        strong {
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 20px;
        }

        span {
            margin-top: 6px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 22px;
        }

        a {
            text-decoration: underline;
            color: #087196;
            cursor: pointer;

            &:hover {
                text-decoration: none;
                color: #287e9c;
            }
        }
    }
}
</style>
